<template>
  <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding="padding">
    <v-tooltip />
    <v-axis :dataKey="axis1Opts.dataKey" :label="label" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
    <v-axis :dataKey="axis2Opts.dataKey" :label="label" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
    <v-legend dataKey="quarter" marker="circle" :offset="[0, -20]" :textStyle="label.textStyle"/>
    <v-coord type="polar" radius="0.8" />
    <v-line position="item*score" :color="color" :size="2" />
    <v-point position="item*score" :color="color" :size="4" shape="circle" />
<!--    <v-line position="item*score" color="#f8e71c" :size="2" />-->
<!--    <v-point position="item*score" color="#f8e71c" :size="4" shape="circle" />-->
<!--     <v-area position="item*score" color="#f8e71c"/>-->
  </v-chart>
</template>

<script>
import DataSet from '@antv/data-set';


// const sourceData = [
//   // {item: '引用', a: 70, b: 30, c: 40},
//   // {item: '口碑', a: 60, b: 70, c: 40},
//   // {item: '产量', a: 50, b: 60, c: 40},
//   // {item: '贡献', a: 40, b: 50, c: 40},
//   // {item: '热度', a: 60, b: 70, c: 40},
//   // {item: '引用', a: 70, b: 50, c: 40}
//   { item: '政治清明', "2020年第3季": -2 },
//   { item: '责任清晰', "2020年第3季": -6 },
//   { item: '思想清廉', "2020年第3季": -12 },
//   { item: '制度清源', "2020年第3季": 0 },
//   { item: '队伍清正', "2020年第3季": -6 },
//   { item: '纪律清透', "2020年第3季": -6 },
//   { item: '文化清新', "2020年第3季": -6 },
// ];

const axis1Opts = {
  dataKey: 'item',
  line: null,
  tickLine: null,
  grid: {
    lineStyle: {
      lineDash: null,
    },
    hideFirstLine: false,
  },
};
const axis2Opts = {
  dataKey: 'score',
  line: null,
  tickLine: null,
  grid: {
    type: 'circle',
    lineStyle: {
      lineDash: null,
    },
    alternateColor: 'rgba(0, 0, 0, 0.4)',
  },
};
const scale = [
  {
    dataKey: 'score',
    min: -20,
    max: 0,
    nice: true
  },
];

const label = {
  textStyle: {
    fill: '#fff',
    fontSize: 15
  }
}

export default {
  name: 'Radar',

  props: {
    sourceData: {
      type: Array,
      default: () => [],
    },

    height: {
      type: Number,
      default: 400,
    },

    padding: {
      type: Array,
      default: () => [0, 0, 95, 0]
    }
  },

  data() {
    return {
      data: [],
      axis1Opts,
      axis2Opts,
      scale,
      label,
      color: ['quarter', function (){
        return '#f8e71c';
      }],
    };
  },

  created() {
    // console.log('雷达图数据--------------', this.sourceData);
    this.handleData(this.sourceData);
  },

  methods: {
    handleData(sourceData) {
      const dv = new DataSet.View().source(sourceData);
      // 处理数据格式为 { item: '', quarter: '', score: 0}
      dv.transform({
        type: 'fold',
        // fields: ['a', 'b', 'c'],
        fields: Object.keys(sourceData[0]).filter(i => i !== 'item'),
        key: 'quarter',
        value: 'score',
      });
      this.data = dv.rows;
    },
  },
};
</script>

<style scoped></style>
